<template>
  <div class="bg-gray-50 min-h-[calc(100vh-40px)]">
    <!-- 功能选项卡 -->
    <!--    <div class="flex mb-5 bg-white rounded-lg p-1 shadow-sm">-->
    <!--      <div-->
    <!--        v-for="tab in functionTabs"-->
    <!--        :key="tab.key"-->
    <!--        :class="[-->
    <!--          'flex-1 text-center py-3 px-5 cursor-pointer rounded-md transition-all duration-300 font-medium',-->
    <!--          activeTab === tab.key-->
    <!--            ? 'bg-blue-500 text-white'-->
    <!--            : 'hover:bg-blue-50 hover:text-blue-500'-->
    <!--        ]"-->
    <!--        @click="activeTab = tab.key"-->
    <!--      >-->
    <!--        {{ tab.label }}-->
    <!--      </div>-->
    <!--    </div>-->
    <AppointmentManagement />
    <!-- 各模块组件 -->
    <!--    <div class="bg-white rounded-lg p-5 shadow-sm">-->
    <!--      <RotationManagement v-if="activeTab === 'rotation'" />-->
    <!--      <FieldControl v-if="activeTab === 'control'" />-->
    <!--      <MemberRegistration v-if="activeTab === 'openCard'" />-->
    <!--      <MemberRecharge v-if="activeTab === 'recharge'" />-->
    <!--      <BuyTimesCard v-if="activeTab === 'buyCard'" />-->
    <!--    </div>-->
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import RotationManagement from "./components/RotationManagement.vue";
import FieldControl from "./components/FieldControl.vue";
import MemberRegistration from "./components/MemberRegistration.vue";
import MemberRecharge from "./components/MemberRecharge.vue";
import BuyTimesCard from "./components/BuyTimesCard.vue";
import AppointmentManagement from "./components/AppointmentManagement.vue";

// 功能选项卡
const functionTabs = [
  { key: "rotation", label: "轮牌" },
  { key: "control", label: "场控" },
  { key: "openCard", label: "开卡" },
  { key: "recharge", label: "充值" },
  { key: "buyCard", label: "买次卡" },
  { key: "appointment", label: "预约" }
];

const activeTab = ref("rotation");
</script>

<style>
.main-content {
  margin-top: 5px !important;
}
</style>
